<template>
  <div class="app-container">
    <template>
      <div class="right-detail">
        <div class="form">
          <el-form
            ref="form"
            :model="form"
            :rules="rule"
            label-width="auto"
            inline="true"
            size="mini"
          >
            <el-form-item label="合同号：">
              <el-input v-model="form.cmtContractNo" clearable></el-input>
            </el-form-item>
            <el-form-item prop label>
              <el-button type="primary" size="mini" @click="search">查 询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <split-pane split="horizontal" v-on:resize="resize" :default-percent="65" :max-percent="80">
          <!-- 上半部分 -->
          <template slot="paneL">
            <div class="top-type" ref="topType">
              <div class="btn-area" ref="btnArea">
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-button
                      plain
                      size="mini"
                      type="primary"
                      v-if="!supplier && isAuth('addContract')"
                      @click="addCar"
                    >新增合同</el-button>
                    <el-button
                      plain
                      size="mini"
                      type="primary"
                      v-if="!supplier && isAuth('editContract')"
                      @click="editCar"
                    >编辑合同</el-button>
                    <el-button
                      plain
                      size="mini"
                      type="primary"
                      v-if="!supplier && isAuth('delContract')"
                      @click="delCar"
                    >删除合同</el-button>
                    <el-button
                      plain
                      size="mini"
                      type="primary"
                      v-if="isAuth('downloadContract')"
                      @click="downloadDialog('doc')"
                    >下载合同</el-button>
                    <el-button
                      plain
                      size="mini"
                      type="primary"
                      v-if="isAuth('printContract')"
                      @click="downloadDialog('html')"
                    >打印合同</el-button>
                  </el-col>
                  <el-col :span="5" :offset="6" v-if="expire">
                    <el-tag
                      effect="dark"
                      style=" width: 52px; background: red; border-color: red; height: 15px; border-radius: 0px;"
                    ></el-tag>
                    <el-tag
                      effect="dark"
                      style=" background-color: #eff2f500; border-color: #f3f3f300; color: #060606; "
                    >
                      <p>三天后到期</p>
                    </el-tag>
                  </el-col>
                </el-row>
              </div>
              <div class="table" ref="inner">
                <el-table
                  :data="tableData"
                  border
                  :height="typeHeight"
                  :header-cell-style="{ textAlign: 'center' }"
                  highlight-current-row
                  @row-click="rowClick"
                  @row-dblclick="dbrowClick"
                  :cell-style="cellStyle"
                >
                  <el-table-column type="index" align="center" width="60" label="序号"></el-table-column>
                  <el-table-column
                    align="left"
                    prop="cmtContractState"
                    label="签订状态"
                    show-overflow-tooltip
                    width="120"
                    sortable
                  >
                    <template slot-scope="scope">
                      <p v-if="scope.row.cmtContractState=='0'">未签订</p>
                      <p v-if="scope.row.cmtContractState=='2'">已生成订单计划</p>
                      <p v-if="scope.row.cmtContractState=='3'">待确定</p>
                      <p v-if="scope.row.cmtContractState=='4'">终止待确认</p>
                      <p v-if="scope.row.cmtContractState=='5'">已终止</p>
                      <p v-if="scope.row.cmtContractState=='6'">被驳回</p>
                      <p
                        v-if="scope.row.cmtContractState!='0' && scope.row.cmtContractState!='2'&& scope.row.cmtContractState!='3'
                         && scope.row.cmtContractState!='4' && scope.row.cmtContractState!='5'&& scope.row.cmtContractState!='6'"
                      >已签订</p>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="right"
                    prop="cmtSigningTime"
                    label="签订时间"
                    show-overflow-tooltip
                    width="165"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="right"
                    prop="cmtContractNo"
                    label="合同编号"
                    show-overflow-tooltip
                    width="165"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="right"
                    prop="cmtContractName"
                    label="合同名称"
                    show-overflow-tooltip
                    width="150"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="right"
                    prop="cmtContractTypeName"
                    label="合同类型"
                    show-overflow-tooltip
                    width="150"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="right"
                    prop="cmtPartyAName"
                    label="托运人"
                    show-overflow-tooltip
                    width="130"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="right"
                    prop="cmtPartyAContacts"
                    label="托运人联系人"
                    show-overflow-tooltip
                    width="150"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="right"
                    prop="cmtPartyAPhone"
                    label="托运人联系电话"
                    show-overflow-tooltip
                    width="150"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="left"
                    prop="cmtPartyBName"
                    label="承运人"
                    show-overflow-tooltip
                    width="120"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="left"
                    prop="cmtPartyBContacts"
                    label="承运人联系人 "
                    show-overflow-tooltip
                    width="180"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="left"
                    prop="cmtPartyBPhone"
                    label="承运人联系电话"
                    show-overflow-tooltip
                    width="180"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="right"
                    prop="cmtConsigneeInformation"
                    label="目的地收货人"
                    show-overflow-tooltip
                    width="180"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="left"
                    prop="cmtPlaceReceipt"
                    label="收货地点"
                    show-overflow-tooltip
                    width="180"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="left"
                    prop="cmtReceivingContact"
                    label="收货联系人"
                    show-overflow-tooltip
                    width="180"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="left"
                    prop="cmtReceivingPhone"
                    label="收货人联系电话"
                    show-overflow-tooltip
                    width="180"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="left"
                    prop="cmtLoadingPlace"
                    label="装货地点"
                    show-overflow-tooltip
                    width="140"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="left"
                    prop="cmtLoadingContact"
                    label="装货地点联系方式"
                    show-overflow-tooltip
                    width="180"
                    sortable
                  ></el-table-column>
                  <!-- <el-table-column  align="right" prop="cmtGoodsName" label="货物品名" show-overflow-tooltip width="130" sortable></el-table-column> -->
                  <el-table-column
                    align="left"
                    prop="cmtPackingMethodName"
                    label="包装方式"
                    show-overflow-tooltip
                    width="130"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="cmtSingleWeightName"
                    label="单件重量"
                    show-overflow-tooltip
                    width="130"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="left"
                    prop="cmtShippingType"
                    label="运输方式"
                    show-overflow-tooltip
                    width="130"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="cmtTransportUnitPrice"
                    label="运输单价"
                    show-overflow-tooltip
                    width="130"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="left"
                    prop="cmtTotalFreight"
                    label="运费合计"
                    show-overflow-tooltip
                    width="130"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="cmtStartDateShipment"
                    label="承运起始日期"
                    show-overflow-tooltip
                    width="130"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="left"
                    prop="cmtLatestLoadingDate"
                    label="最迟装货信息"
                    show-overflow-tooltip
                    width="140"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="left"
                    prop="cmtCorporateName"
                    label="公司名称"
                    show-overflow-tooltip
                    width="120"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="left"
                    prop="cmtOpeningBank"
                    label="开户行"
                    show-overflow-tooltip
                    width="120"
                    sortable
                  ></el-table-column>
                  <el-table-column
                    align="left"
                    prop="cmtAccount"
                    label="账号"
                    show-overflow-tooltip
                    width="120"
                    sortable
                  ></el-table-column>
                </el-table>
              </div>
              <div>
                <el-pagination
                  ref="pagination"
                  small
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="Pagination.currentPage"
                  :page-sizes="Pagination.pageSizeList"
                  :page-size="Pagination.pageSize"
                  :layout="Pagination.layout"
                  :total="Pagination.total"
                ></el-pagination>
              </div>
            </div>
          </template>
          <!-- 下半部分 -->
          <template slot="paneR">
            <div class="codeNumberCode" style="background-color: #fff;">托运内容</div>
            <div class="bottom-code" ref="bottomCode" style="background-color: #fff;">
              <div class="table">
                <!-- <el-collapse value="1"> -->
                <!-- <el-collapse-item title="托运内容" name="1"> -->
                <el-table
                  :data="mainBotTableData"
                  border
                  :height="detlHeight"
                  :header-cell-style="{ textAlign: 'center' }"
                  highlight-current-row
                >
                  <el-table-column type="index" align="center" width="60" label="序号"></el-table-column>
                  <el-table-column
                    align="left"
                    show-overflow-tooltip
                    label="提货单编号"
                    prop="cddTakeNo"
                  ></el-table-column>
                  <el-table-column
                    align="left"
                    show-overflow-tooltip
                    label="船公司"
                    prop="cddShippingCompany"
                  ></el-table-column>
                  <el-table-column align="left" show-overflow-tooltip label="品牌" prop="cddBrand"></el-table-column>
                  <el-table-column align="left" show-overflow-tooltip label="等级" prop="cddGrade"></el-table-column>
                  <el-table-column
                    align="left"
                    show-overflow-tooltip
                    label="数量（吨）"
                    prop="cddQuantity"
                  ></el-table-column>
                </el-table>
                <!-- </el-collapse-item> -->
                <!-- </el-collapse> -->
              </div>
            </div>
          </template>
        </split-pane>
      </div>
    </template>

    <!-- 对话框 新增 编辑合同管理 -->
    <el-dialog
      :title="name"
      :visible.sync="openDialog"
      v-if="openDialog"
      v-el-drag-dialog
      :before-close="close"
      :close-on-click-modal="false"
      width="70%"
    >
      <div class="dialogBox">
        <div class="dialogTopBox">
          <el-form
            :model="dialogForm"
            size="mini"
            :rules="dialogRule"
            ref="dialogForm"
            label-width="auto"
          >
            <div class="box">
              <div class="name">基础信息</div>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item prop="bidId" label="标书：">
                    <div
                      @click="see? RefTypeDialogVisible=false:RefTypeDialogVisible = true,BiddingList()"
                    >
                      <el-input
                        v-model="feeValue"
                        :class="{'pointerinput': !see}"
                        disabled
                        clearable
                        maxlength="32"
                        placeholder="选择标书"
                      ></el-input>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item prop="cmtContractNo" label="合同编号：">
                    <el-input
                      v-model="dialogForm.cmtContractNo"
                      style="width:95%"
                      clearable
                      disabled="true"
                      maxlength="32"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="cmtContractName" label="合同名称：">
                    <el-input
                      v-model="dialogForm.cmtContractName"
                      style="width:95%"
                      :disabled="see"
                      clearable
                      maxlength="32"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="cmtContractType" label="合同类型：">
                    <el-select
                      v-model="dialogForm.cmtContractType"
                      placeholder="请选择"
                      :disabled="see"
                      style="width:95%"
                    >
                      <el-option
                        v-for="item in cmtContractType"
                        :key="item.rvLowValue"
                        :label="item.rvCmeaning"
                        :value="item.rvLowValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <!-- <el-col :span="8">
                <el-form-item prop="cmtGoodsName" label="货物品名：">
                  <el-input v-model="dialogForm.cmtGoodsName" style="width:95%"  clearable :disabled="see" maxlength="32">
                  </el-input>
                </el-form-item>
                </el-col>-->
                <el-col :span="8">
                  <el-form-item prop="cmtShippingType" label="运输方式：">
                    <el-input
                      v-model="dialogForm.cmtShippingType"
                      style="width:95%"
                      clearable
                      :disabled="see"
                      maxlength="10"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="cmtPackingMethod" label="包装方式：">
                    <el-select
                      v-model="dialogForm.cmtPackingMethod"
                      placeholder="请选择"
                      :disabled="see"
                      style="width:95%"
                    >
                      <el-option
                        v-for="item in modeList"
                        :key="item.rvLowValue"
                        :label="item.rvCmeaning"
                        :value="item.rvLowValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="cmtSingleWeight" label="单件重量(公斤)：">
                    <el-input
                      v-model="dialogForm.cmtSingleWeight"
                      style="width:95%"
                      :oninput=" dialogForm.cmtSingleWeight = numberOnly(dialogForm.cmtSingleWeight)"
                      clearable
                      :disabled="see"
                      maxlength="9"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item prop="cmtGoodsName" label="运输总量(吨)：">
                    <el-input
                      v-model="dialogForm.cmtContractTotalTransport"
                      style="width:95%"
                      clearable
                      disabled="ture"
                      maxlength="32"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="cmtTransportUnitPrice" label="运输单价(元/吨)：">
                    <el-input
                      v-model="dialogForm.cmtTransportUnitPrice"
                      @change="calculationTotalFreight"
                      style="width:95%"
                      :oninput=" dialogForm.cmtTransportUnitPrice = numberOnly(dialogForm.cmtTransportUnitPrice)"
                      clearable
                      :disabled="see"
                      maxlength="9"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="cmtTotalFreight" label="运费合计(元)：">
                    <el-input
                      v-model="dialogForm.cmtTotalFreight"
                      style="width:95%"
                      :oninput=" dialogForm.cmtTotalFreight = numberOnly(dialogForm.cmtTotalFreight)"
                      clearable
                      :disabled="see"
                      maxlength="9"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item prop="cmtStartDateShipment" label="承运起始日期：">
                    <el-date-picker
                      style="width:95%"
                      @change="cmtStartDateShipmentChange"
                      v-model="dialogForm.cmtStartDateShipment"
                      :disabled="see"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="cmtLatestLoadingDate" label="最迟装货日期：">
                    <el-date-picker
                      style="width:95%"
                      :picker-options="{disabledDate}"
                      v-model="dialogForm.cmtLatestLoadingDate"
                      :disabled="see"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <el-row :gutter="24">
              <el-col :span="12">
                <div class="box">
                  <div class="name">托运方信息</div>
                  <el-row :gutter="24">
                    <el-col :span="24">
                      <el-form-item prop="cmtPartyA" label="托运方：">
                        <el-input
                          v-model="cmtPartyAName"
                          style="width:95%"
                          disabled
                          clearable
                          maxlength="32"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="24">
                      <el-form-item prop="cmtPartyAContacts" label="托运方联系人：">
                        <el-input
                          v-model="dialogForm.cmtPartyAContacts"
                          style="width:95%"
                          clearable
                          :disabled="see"
                          maxlength="32"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="24">
                      <el-form-item prop="cmtPartyAPhone" label="托运方联系电话：">
                        <el-input
                          v-model="dialogForm.cmtPartyAPhone"
                          style="width:95%"
                          :oninput="dialogForm.cmtPartyAPhone=dialogForm.cmtPartyAPhone.replace(/[^\d]/g,'')"
                          clearable
                          :disabled="see"
                          maxlength="11"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="24">
                      <el-form-item prop="cmtLoadingPlace" label="装货地点：">
                        <el-input
                          v-model="dialogForm.cmtLoadingPlace"
                          style="width:95%"
                          clearable
                          :disabled="see"
                          maxlength="32"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="24">
                      <el-form-item prop="cmtLoadingContact" label="装货地点联系方式：">
                        <el-input
                          v-model="dialogForm.cmtLoadingContact"
                          style="width:95%"
                          clearable
                          :disabled="see"
                          maxlength="32"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="24">
                      <div class="grid-content"></div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="24">
                      <div class="grid-content"></div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="box">
                  <div class="name">承运方信息</div>
                  <el-row :gutter="24">
                    <el-col :span="24">
                      <el-form-item prop="cmtPartyB" label="承运方：">
                        <el-input
                          v-model="cmtPartyBName"
                          style="width:95%"
                          disabled
                          clearable
                          maxlength="32"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="24">
                      <el-form-item prop="cmtPartyBContacts" label="承运方联系人：">
                        <el-input
                          v-model="dialogForm.cmtPartyBContacts"
                          style="width:95%"
                          clearable
                          :disabled="see"
                          maxlength="32"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="24">
                      <el-form-item prop="cmtPartyBPhone" label="承运方联系电话：">
                        <el-input
                          v-model="dialogForm.cmtPartyBPhone"
                          style="width:95%"
                          :oninput="dialogForm.cmtPartyBPhone=dialogForm.cmtPartyBPhone.replace(/[^\d]/g,'')"
                          clearable
                          :disabled="see"
                          maxlength="11"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="24">
                      <el-form-item prop="cmtConsigneeInformation" label="目的地收货方：">
                        <el-input
                          v-model="dialogForm.cmtConsigneeInformation"
                          style="width:95%"
                          clearable
                          :disabled="see"
                          maxlength="32"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="24">
                      <el-form-item prop="cmtPlaceReceipt" label="收货地点：">
                        <el-input
                          v-model="dialogForm.cmtPlaceReceipt"
                          style="width:95%"
                          clearable
                          :disabled="see"
                          maxlength="32"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="24">
                      <el-form-item prop="cmtReceivingContact" label="收货联系人：">
                        <el-input
                          v-model="dialogForm.cmtReceivingContact"
                          style="width:95%"
                          clearable
                          :disabled="see"
                          maxlength="32"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="24">
                      <el-form-item prop="cmtReceivingPhone" label="收货人联系电话：">
                        <el-input
                          v-model="dialogForm.cmtReceivingPhone"
                          style="width:95%"
                          :oninput="dialogForm.cmtReceivingPhone=dialogForm.cmtReceivingPhone.replace(/[^\d]/g,'')"
                          clearable
                          :disabled="see"
                          maxlength="32"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>

            <div class="box">
              <div class="name">账户信息</div>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item prop="cmtCorporateName" label="公司名称：">
                    <el-input
                      v-model="dialogForm.cmtCorporateName"
                      style="width:95%"
                      clearable
                      :disabled="see"
                      maxlength="32"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="cmtOpeningBank" label="开户行：">
                    <el-input
                      v-model="dialogForm.cmtOpeningBank"
                      style="width:95%"
                      clearable
                      :disabled="see"
                      maxlength="32"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="cmtAccount" label="账号 ：">
                    <el-input
                      v-model="dialogForm.cmtAccount"
                      style="width:95%"
                      clearable
                      :disabled="see"
                      maxlength="32"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>

        <div class="box">
          <div class="name">托运信息</div>
          <div class="dialogBotBox">
            <div class="botBtnBox">
              <el-button plain size="mini" type="primary" @click="addDataArray">新增</el-button>
              <el-button plain size="mini" type="primary" @click="delRow">删除</el-button>
            </div>
            <el-form :model="tableDataArray" ref="tableDataArray">
              <el-table
                :data="tableDataArray"
                ref="table_config_data_table"
                border
                row-key="id"
                align="left"
                @row-click="rowData"
                :row-class-name="tableRowClassName"
                :height="tableDataheight"
              >
                <el-table-column label="序号" type="index" width="50"></el-table-column>
                <el-table-column label="提货单编号">
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="scope.$index+'.cddTakeNo'"
                      :rules="[ {required: true, message: '提货单编号不能为空', trigger: 'blur'}]"
                    >
                      <el-input
                        v-model="tableDataArray[scope.$index].cddTakeNo"
                        :disabled="see"
                        maxlength="32"
                        clearable
                        size="mini"
                        placeholder="请输入内容"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="船公司">
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="scope.$index+'.cddShippingCompany'"
                      :rules="[ {required: true, message: '船公司不能为空', trigger: 'blur'}]"
                    >
                      <el-input
                        v-model="tableDataArray[scope.$index].cddShippingCompany"
                        maxlength="32"
                        :disabled="see"
                        clearable
                        size="mini"
                        placeholder="请输入内容"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="品牌">
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="scope.$index+'.cddBrand'"
                      :rules="[ {required: true, message: '品牌不能为空', trigger: 'blur'}]"
                    >
                      <el-input
                        v-model="tableDataArray[scope.$index].cddBrand"
                        maxlength="32"
                        :disabled="see"
                        clearable
                        size="mini"
                        placeholder="请输入内容"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="等级">
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="scope.$index+'.cddGrade'"
                      :rules="[ {required: true, message: '等级不能为空', trigger: 'blur'}]"
                    >
                      <el-input
                        v-model="tableDataArray[scope.$index].cddGrade"
                        maxlength="32"
                        :disabled="see"
                        clearable
                        size="mini"
                        placeholder="请输入内容"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="数量（吨）">
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="scope.$index+'.cddQuantity'"
                      :rules="[ {required: true, validator:chckcddQuantity, trigger: 'blur'}]"
                    >
                      <el-input
                        v-model="tableDataArray[scope.$index].cddQuantity"
                        :disabled="see"
                        maxlength="9"
                        :oninput=" tableDataArray[scope.$index].cddQuantity = numberOnly(tableDataArray[scope.$index].cddQuantity)"
                        clearable
                        size="mini"
                        placeholder="请输入内容"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
          </div>
        </div>
      </div>
      <!-- 选择标书弹出框-->
      <el-dialog
        width="50%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-el-drag-dialog
        title="选择标书"
        :visible.sync="RefTypeDialogVisible"
        v-if="RefTypeDialogVisible"
        :before-close="handleTypeDialogClose"
        append-to-body
      >
        <el-table
          :data="biddingList"
          highlight-current-row
          border
          :height="biddingHeight"
          :header-cell-style="{
              textAlign: 'center'
            }"
          :cell-style="{}"
          @row-click="biddingClick"
        >
          <el-table-column type="index" align="center" width="60" label="序号"></el-table-column>
          <el-table-column
            size="mini"
            show-overflow-tooltip
            prop="bidCode"
            align="center"
            label="标的编号"
          ></el-table-column>
          <el-table-column
            size="mini"
            show-overflow-tooltip
            prop="bidName"
            align="center"
            label="标的名称"
          ></el-table-column>
          <el-table-column align="center" label="标的状态" prop="bidStatus" show-overflow-tooltip></el-table-column>
          <el-table-column
            size="mini"
            show-overflow-tooltip
            prop="bidType"
            align="center"
            label="标的类型"
          ></el-table-column>
        </el-table>
        <div class="tableTitle">需求信息</div>
        <div>
          <el-table
            :data="contractSugarList"
            :height="detlHeight+30"
            highlight-current-row
            border
            :header-cell-style="{
              textAlign: 'center'
            }"
            :cell-style="{}"
            @row-click="contractSugarClick"
          >
            <el-table-column type="index" align="center" width="60" label="序号"></el-table-column>
            <el-table-column
              size="mini"
              show-overflow-tooltip
              width="120"
              align="left"
              prop="demandCode"
              label="需求编号"
            ></el-table-column>
            <el-table-column show-overflow-tooltip align="center" prop="brand" label="货物品牌"></el-table-column>
            <el-table-column show-overflow-tooltip align="center" prop="dailyOutput" label="规格"></el-table-column>
            <el-table-column
              size="mini"
              show-overflow-tooltip
              prop="product"
              align="center"
              label="产品大类"
            ></el-table-column>
            <el-table-column
              size="mini"
              show-overflow-tooltip
              prop="kind"
              align="center"
              label="品种"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              prop="transportQuantity"
              label="运输数量(吨)"
            ></el-table-column>
            <el-table-column
              size="mini"
              show-overflow-tooltip
              prop="cmtContractNo"
              align="center"
              label="合同编号"
            ></el-table-column>
            <el-table-column show-overflow-tooltip align="center" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="tranDialogInfoDialogVisible = true"
                >线路详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="RefTypeDialogVisible = false" size="mini">关闭</el-button>
          <el-button type="primary" @click="savebidding" size="mini">确定</el-button>
        </div>
        <el-dialog
          width="40%"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          v-el-drag-dialog
          title="线路详情"
          :visible.sync="tranDialogInfoDialogVisible"
          v-if="tranDialogInfoDialogVisible"
          append-to-body
        >
          <el-table
            :data="tranDialogInfoList"
            :height="detlHeight"
            highlight-current-row
            border
            :header-cell-style="{
                        textAlign: 'center'
                      }"
            :cell-style="{}"
          >
            <el-table-column type="index" width="60" align="center" label="序号"></el-table-column>
            <el-table-column show-overflow-tooltip align="center" label="起始地" prop="site"></el-table-column>
            <el-table-column show-overflow-tooltip align="center" label="目的地" prop="destination"></el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" type="primary" @click="tranDialogInfoDialogVisible = false">关闭</el-button>
          </span>
        </el-dialog>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="mini">关闭</el-button>
        <el-button type="primary" @click="save" v-if="!see" size="mini">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="name"
      :visible.sync="downloadOpenDialog"
      v-if="downloadOpenDialog"
      v-el-drag-dialog
      :before-close="closeDownload"
      :close-on-click-modal="false"
      :width="downloadWidth"
    >
      <el-form
        size="mini"
        v-show="downloadType != 'template'"
        ref="dialogDownloadForm"
        :model="dialogDownloadForm"
        :rules="dialogDownloadFormRule"
        label-width="auto"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="templateTvalue" label="选择模板：">
              <el-select v-model="dialogDownloadForm.templateTvalue" placeholder="请选择">
                <el-option
                  v-for="item in templateList"
                  :key="item.cteId"
                  :label="item.cteName"
                  :value="item.cteId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-collapse-transition>
        <div v-show="downloadType == 'template'">
          <div :style="templateObjec" v-show="downloadType == 'template'">
            <div ref="html_template" style="transform: scale(0.9) translateY(-12%);">
              <!-- 要打印的内容 -->
              <div id="printMe" v-html="html"></div>
            </div>
          </div>
        </div>
      </el-collapse-transition>
      <div slot="footer" class="dialog-footer">
        <el-button @click="downloadOpenDialog = false,refreshList()" size="mini">关闭</el-button>
        <el-button type="primary" @click="download" v-if="downloadType != 'template'" size="mini">确定</el-button>
        <!-- <el-button type="primary"  v-print="'#printMer'" v-if="downloadType == 'template'"  size="mini">打印</el-button> -->
        <el-button
          type="primary"
          @click="printContent"
          v-if="downloadType == 'template'"
          size="mini"
        >打印</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import paginationMixin from '@/mixins/pagination'
import resizeMixin from '@/mixins/resize'
import isAtuth from '@/mixins/buttonAuth'
import Myprint from '@/plugins/print'
import store from '@/store'
import {
  effective,
  queryDemandLine,
  contractSugar,
  getSupplier,
  getShipper,
  contractBidding,
  getRefCodesByType,
  downloadContractHtmlModel,
  addContractModel,
  findContractModel1,
  editContractModel,
  delContractModel,
  contractGenerateNo,
  findContractTemplateModel,
  downloadContractModel
} from '@/request/api'
export default {
  name: 'router.expire',
  mixins: [paginationMixin, resizeMixin, isAtuth],
  data() {
    return {
      tranDialogInfoDialogVisible: false,
      tranDialogInfoList: [],
      contractSugarTemporary: {},
      biddingTemporary: {},
      contractSugarList: [],
      biddingList: [],
      biddingHeight: -1,
      RefTypeDialogVisible: false, //选择标书弹出框
      supplier: false, //控制页面查询条件 供应商页面区分
      expire: true, //是不是预警页面
      feeValue: '', //标签名称
      cmtPartyAName: '', //托运方名称
      cmtPartyBName: '', //承运方
      isShow: false,
      form: {
        //搜索条件
        cmtContractNo: ''
      },
      sumcddQuantity: 0,
      tableDataheight: '-',
      templateObjec: {
        height: ''
      },
      tableHeight: 300,
      cmtContractType: [],
      img: '',
      html: '',
      downloadWidth: '40%',
      downloadType: 'doc',
      downloadOpenDialog: false, //附件下载 控制
      rowDataArray: {}, //线路信息 点击列获取
      tableDataArray: [], //线路信息 列表
      templateList: [], //模板列表
      modeList: [],
      dialogDownloadFormRule: {
        templateTvalue: [{ required: true, message: '模板不能为空', trigger: 'blur' }]
      },
      dialogDownloadForm: {
        templateTvalue: ''
      },
      templateTvalue: '',
      typeHeight: -1,
      detlHeight: -1,
      tableData: [], //合同主列表
      mainBotTableData: [], //子表
      currentData: {}, //主列表单击时暂存数据
      // 对话框名称
      name: '',
      openDialog: false,
      dialogForm: {
        cmtContractTotalTransport: 0,
        bidId: '',
        cmtContractNo: '',
        cmtContractType: '',
        cmtContractName: '',
        cmtPartyA: '',
        cmtPartyAContacts: '',
        cmtPartyAPhone: '',
        cmtPartyB: '',
        cmtPartyBContacts: '',
        cmtPartyBPhone: '',
        cmtConsigneeInformation: '',
        cmtPlaceReceipt: '',
        cmtReceivingContact: '',
        cmtReceivingPhone: '',
        cmtLoadingPlace: '',
        cmtLoadingContact: '',
        cmtGoodsName: '',
        cmtPackingMethod: '',
        cmtSingleWeight: '',
        cmtShippingType: '',
        cmtTransportUnitPrice: '',
        cmtTotalFreight: '',
        cmtStartDateShipment: '',
        cmtLatestLoadingDate: '',
        cmtCorporateName: '',
        cmtOpeningBank: '',
        cmtAccount: ''
      },
      dialogRule: {
        cmtContractNo: [{ required: true, message: '合同编号不能为空', trigger: 'blur' }],
        cmtContractType: [{ required: true, message: '合同类型不能为空', trigger: 'blur' }],
        cmtPartyA: [{ required: true, message: '托运方不能为空', trigger: 'blur' }],
        cmtPartyB: [{ required: true, message: '承运方不能为空', trigger: 'blur' }]
      },
      edit: false, // 编辑模式
      see: false //查看模式
    }
  },
  created() {
    this.resize = () => {
      this.typeHeight = this.$refs.topType.offsetHeight - 80
      this.detlHeight = this.$refs.bottomCode.offsetHeight - 130
      this.biddingHeight = this.$refs.bottomCode.offsetHeight - 80
    }
  },
  mounted() {
    getRefCodesByType('包装方式').then(ref => {
      this.modeList = ref.data
    })
    getRefCodesByType('合同类型').then(ref => {
      this.cmtContractType = ref.data
    })
    this.refreshList()
  },
  methods: {
    //保存标签
    savebidding() {
      let biddingTemporary = this.biddingTemporary || {}
      let contractSugarTemporary = this.contractSugarTemporary || {}
      let tranDialogInfoList = this.tranDialogInfoList || []
      let mes = null
      if (contractSugarTemporary.sugarId == null) {
        mes = `请选择想要关联的需求`
      } else if (contractSugarTemporary.cmtContractNo != null) {
        mes = `该需求已有合同${contractSugarTemporary.cmtContractNo}禁止添加！`
      }
      if (mes != null) {
        this.$alert(mes, '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      //设置标签名称
      this.feeValue = biddingTemporary.bidName
      //设置标签id
      this.dialogForm.bidId = biddingTemporary.bidId
      //设置托运方
      this.dialogForm.cmtPartyA = contractSugarTemporary.consignorId
      this.cmtPartyAName = contractSugarTemporary.consignorName
      //设置承运方
      this.dialogForm.cmtPartyB = contractSugarTemporary.bqFltId
      this.cmtPartyBName = contractSugarTemporary.bqFltName
      //设置运输总量
      this.dialogForm.cmtContractTotalTransport = contractSugarTemporary.transportQuantity
      //设置装货地
      this.dialogForm.cmtLoadingPlace = tranDialogInfoList[0].site || ''
      //设置收货地
      this.dialogForm.cmtPlaceReceipt = tranDialogInfoList[0].destination || ''
      //设置品牌
      this.tableDataArray.forEach(o => {
        o.cddBrand = o.cddBrand || contractSugarTemporary.brand
      })
      //绑定需求id
      this.dialogForm.sugarId = contractSugarTemporary.sugarId
      //关闭窗口
      this.RefTypeDialogVisible = false
      //刷新唯一编号
      this.generateNo()
    },
    // dialog 查看线路详细信息
    showTransportMethod(val) {
      queryDemandLine({
        sugarId: val.sugarId
      }).then(res => {
        if (res.success == 1) {
          this.tranDialogInfoList = res.data
        }
      })
    },
    contractSugarClick(row) {
      this.contractSugarTemporary = row
      this.showTransportMethod(row)
    },
    biddingClick(row) {
      this.biddingTemporary = row
      this.contractSugarTemporary = {}
      contractSugar(row.bidId).then(ref => {
        this.contractSugarList = ref.data
      })
    },
    handleTypeDialogClose() {
      this.RefTypeDialogVisible = false
      this.tranDialogInfoDialogVisible = false
    },
    calculationTotalFreight() {
      let val = parseFloat(this.dialogForm.cmtTransportUnitPrice || 0)
      this.dialogForm.cmtTotalFreight = this.dialogForm.cmtContractTotalTransport * val
    },
    chckcddQuantity(rule, value, callback) {
      let val = value || null
      if (val == null) {
        return callback(new Error('数量不能为空'))
      } else {
        var v = 0
        this.tableDataArray.forEach(o => {
          v = parseFloat(o.cddQuantity) + v
        })
        if (!(this.dialogForm.cmtContractTotalTransport >= v)) {
          return callback(new Error('数量大于运输总量'))
        }
      }
      callback()
    },
    //标书数据
    BiddingList() {
      this.cmtPartyBName = ''
      this.cmtPartyAName = ''
      this.biddingTemporary = {}
      this.contractSugarTemporary = {}
      this.contractSugarList = []
      this.tranDialogInfoList = []
      contractBidding().then(res => {
        this.biddingList = res.data
      })
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (!this.expire) {
        return ''
      }
      if (column.label == '合同编号' && new Date(row.cmtLatestLoadingDate).getTime() < new Date().getTime()) {
        return 'background: red'
      } else {
        return ''
      }
    },
    dateFormat(fmt, date) {
      let ret
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      }
      for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0'))
        }
      }
      return fmt
    },
    cmtStartDateShipmentChange() {
      if (this.dialogForm.cmtLatestLoadingDate != null && this.dialogForm.cmtLatestLoadingDate != '') {
        let cmtStartDateShipment = new Date(this.dialogForm.cmtStartDateShipment)
        if (cmtStartDateShipment.getTime() > new Date(this.dialogForm.cmtLatestLoadingDate).getTime()) {
          cmtStartDateShipment = cmtStartDateShipment.setDate(cmtStartDateShipment.getDate() + 1)
          this.dialogForm.cmtLatestLoadingDate = this.dateFormat('YYYY-mm-dd', new Date(cmtStartDateShipment))
        }
      }
    },
    getCmtContractStateName(v) {
      if (v.cmtContractState != '0') {
        return '已签订'
      }
      return '未签订'
    },
    printHtml() {
      Myprint.print(this.$refs.html_template)
    },
    disabledDate(time) {
      return time.getTime() < new Date(this.dialogForm.cmtStartDateShipment).getTime()
    },
    generateNo() {
      if (this.dialogForm.cmtPartyA == null || this.dialogForm.cmtPartyA == '') {
        return
      }
      if (this.dialogForm.cmtPartyB == null || this.dialogForm.cmtPartyB == '') {
        return
      }
      contractGenerateNo({
        cmtPartyA: this.cmtPartyAName,
        cmtPartyB: this.cmtPartyBName,
        cmtContractNo: this.dialogForm.cmtContractNo
      }).then(res => {
        this.dialogForm.cmtContractNo = res.data
      })
    },
    getList(currentPage, pageSize, fcTotal) {
      this.currentData = {}
      this.mainBotTableData = []
      let cmtPartyB = null
      if (this.supplier) {
        cmtPartyB = store.state.user.FLT_UUID_DX_H
      }
      findContractModel1({
        cmtPartyB,
        cmtContractNo: this.form.cmtContractNo,
        currentPage,
        pageSize
      }).then(res => {
        this.tableData = res.data
        fcTotal(res.total)
      })
    },
    numberOnly(data) {
      if (data == null) {
        return null
      }
      let val = data.toString().replace(/(^\s*)|(\s*$)/g, '')
      if (!val) {
        return val
      }
      val = val.replace(/[^\d.]/g, '')
      // 保证第一位只能是数字，不能是点
      val = val.replace(/^\./g, '')
      // 小数只能出现1位
      val = val
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
      // 小数点后面保留2位
      val = val.replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3')
      return val
    },
    //打印  printMe 要打印内容的id
    printContent() {
      effective(this.currentData.cmtId).then(ref => {})
      let subOutputRankPrint = document.getElementById('printMe')
      let childDiv = subOutputRankPrint.getElementsByTagName('div')[0].getElementsByTagName('p')
      let childDivA = subOutputRankPrint.getElementsByTagName('div')[0]
      childDivA.style.marginLeft = '70px'
      childDivA.style.marginTop = '60px'
      for (var i = 0; i < childDiv.length; i++) {
        // childDiv[i].style.marginLeft = '-35px'
        childDiv[i].style.lineHeight = '20px'
        // childDiv[i].style.fontSize = '30px'
        // console.log(childDiv[i],8888)
      }
      let newContent = subOutputRankPrint.innerHTML
      let oldContent = document.body.innerHTML
      document.body.innerHTML = newContent

      window.print()
      window.location.reload()
      document.body.innerHTML = oldContent
      this.downloadOpenDialog = false
      return false
    },
    download() {
      let _this = this
      this.$refs.dialogDownloadForm.validate(valid => {
        if (valid) {
          if (this.downloadType == 'html') {
            downloadContractHtmlModel({
              cmtId: this.currentData.cmtId,
              cteId: this.dialogDownloadForm.templateTvalue
            }).then(res => {
              this.html = res.data.body

              this.downloadWidth = '50%'
              this.downloadType = 'template'
              this.$nextTick(() => {
                let subOutputRankPrint = document.getElementById('printMe')
                let childDiv = subOutputRankPrint.getElementsByTagName('div')[0].getElementsByTagName('p')
                let childDivA = subOutputRankPrint.getElementsByTagName('div')[0]
                childDivA.style.marginLeft = '70px'
                childDivA.style.marginTop = '60px'
                for (var i = 0; i < childDiv.length; i++) {
                  // childDiv[i].style.marginBottom = '5px'
                  // childDiv[i].style.marginLeft = '-35px'
                  childDiv[i].style.lineHeight = '20px'
                }
                let height = _this.$refs.html_template.offsetHeight * 0.9
                _this.templateObjec.height = height + 'px'
              })
            })
            return
          }
          downloadContractModel({
            cmtId: this.currentData.cmtId,
            cteId: this.dialogDownloadForm.templateTvalue
          }).then(res => {
            let filename = res.headers['filename']
            filename = decodeURI(filename)
            let blob = new Blob([res.data])
            let reader = new FileReader()
            reader.readAsDataURL(blob)
            reader.onload = e => {
              let a = document.createElement('a')
              a.download = filename
              a.href = e.target.result
              document.body.appendChild(a)
              a.click()
              document.body.removeChild(a)
            }
            window.parent._$store.dispatch('app/loading_status', false)
            this.closeDownload()
          })
        }
      })
    },
    downloadDialog(type) {
      this.downloadWidth = '40%'
      this.downloadType = type
      let nametype = '下载'
      this.name = '合同下载'
      if (this.downloadType == 'html') {
        nametype = '打印'
        this.name = '合同打印'
      }
      if (Object.keys(this.currentData).length === 0) {
        this.$alert(`请选择需要的${nametype}合同！`, '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      findContractTemplateModel({}).then(ref => {
        this.templateList = ref.data
        this.downloadOpenDialog = true
      })
    },
    addDataArray() {
      let contractSugarTemporary = this.contractSugarTemporary || {}
      let biddingTemporary = this.biddingTemporary || {}
      this.tableDataArray.push({
        cddQuantity: contractSugarTemporary.transportQuantity || '',
        cddBrand: contractSugarTemporary.brand
      })
      this.tableDataheightFn()
      this.$nextTick(() => {
        if (this.tableDataArray.length >= 5) {
          this.$refs.table_config_data_table.bodyWrapper.scrollTop = this.$refs.table_config_data_table.bodyWrapper.scrollHeight
        }
      })
    },
    tableDataheightFn() {
      if (this.tableDataArray.length == 5) {
        let table = this.$refs.table_config_data_table.$el
        this.tableDataheight = table.getElementsByTagName('table')[1].scrollHeight + table.getElementsByTagName('table')[0].scrollHeight
      }
    },
    //查询
    search() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.refreshList()
        }
      })
    },
    tableRowClassName({ row, rowIndex }) {
      row.rowIndex = rowIndex
    },
    rowData(row, column, event) {
      this.rowDataArray = row
    },
    delRow() {
      if (Object.keys(this.rowDataArray).length === 0) {
        this.$alert('请选择需要删除的托运信息！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.tableDataArray.splice(this.rowDataArray.rowIndex, 1)
      if (this.tableDataArray.length <= 5) {
        this.tableDataheight = '-'
      }
    },
    //双击查看啊详情
    dbrowClick(row) {
      this.openDialog = true
      this.see = true
      this.edit = true
      this.feeValue = row.bidName
      this.dialogForm = Object.assign({}, row)
      this.cmtPartyAName = row.cmtPartyAName
      this.cmtPartyBName = row.cmtPartyBName
      if (row.consignmentDetailedVOs.length <= 4) {
        this.tableDataheight = '-'
        this.tableDataArray = row.consignmentDetailedVOs
        return
      }
      this.tableDataArray = row.consignmentDetailedVOs.slice(0, 4)
      this.$nextTick(() => {
        this.tableDataArray.push(row.consignmentDetailedVOs.slice(4, 5)[0])
        this.tableDataheightFn()
        if (row.consignmentDetailedVOs.length > 5) {
          this.tableDataArray = row.consignmentDetailedVOs
        }
      })
    },
    //单击行
    rowClick(row) {
      this.currentData = Object.assign({}, row)
      this.mainBotTableData = this.currentData.consignmentDetailedVOs
    },
    //删除车辆
    delCar() {
      if (Object.keys(this.currentData).length === 0) {
        this.$alert('请选择需要删除的合同！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if (this.currentData.cmtContractState != '0') {
        this.$alert('合同生效禁止删除！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确定要删除该合同吗？', '提示', {
        confirmButtonText: '确定'
      }).then(() => {
        delContractModel({ cmtId: this.currentData.cmtId }).then(res => {
          if (res.success === '1') {
            this.$message({
              type: 'success',
              message: '删除成功',
              showClose: true
            })
            this.close()
          }
        })
      })
    },
    //保存
    save() {
      let _this = this
      _this.$refs.dialogForm.validate(valid => {
        if (Object.keys(this.tableDataArray).length != 0) {
          if (valid) {
            _this.$refs.tableDataArray.validate(valid => {
              if (valid) {
                _this.dialogForm.consignmentDetailedList = _this.tableDataArray
                if (this.edit) {
                  //编辑
                  editContractModel(_this.dialogForm).then(res => {
                    if (res.success === '1') {
                      this.$message({
                        type: 'success',
                        message: '编辑合同成功！',
                        showClose: true
                      })
                      this.close()
                    }
                  })
                } else {
                  //新增
                  addContractModel(_this.dialogForm).then(res => {
                    if (res.success === '1') {
                      this.$message({
                        type: 'success',
                        message: '新增合同成功！',
                        showClose: true
                      })
                      this.close()
                    }
                  })
                }
              }
            })
          }
        } else {
          this.$alert('输入托运信息才能保存', '提示', {
            confirmButtonText: '确定'
          })
        }
      })
    },

    computingBrandCache(arryData) {
      if (!(arryData instanceof Array) || arryData.length == 0) {
        return
      }
      let contractSugarTemporary = this.contractSugarTemporary || {}
      let map = arryData.reduce((m, x) => m.set(x.cddBrand, (m.get(x.cddBrand) || 0) + 1), new Map())
      let newarry = Array.from(map.values()).sort((a, b) => b - a)
      if (newarry[0] == 1 || newarry.length == 1) {
        contractSugarTemporary.brand = arryData[newarry.length - 1].cddBrand
        this.contractSugarTemporary = contractSugarTemporary
        return
      }
      let cddBrandArry = []
      map.forEach((v, k) => {
        if (v == newarry[0]) {
          cddBrandArry.push(k)
        }
      })
      let cddBrand = null
      if (cddBrandArry.length == 1) {
        cddBrand = cddBrandArry[0]
      } else {
        for (var i = cddBrandArry.length - 1; i >= 0; i--) {
          if (cddBrandArry.indexOf(cddBrandArry[i].cddBrand) != -1) {
            cddBrand = cddBrandArry[i].cddBrand
            return
          }
        }
      }
      contractSugarTemporary.brand = cddBrand
      this.contractSugarTemporary = contractSugarTemporary
    },
    //编辑车辆
    editCar() {
      //1.先判断是否已审核 2.执行编辑
      if (Object.keys(this.currentData).length === 0) {
        this.$alert('请选择需要编辑的合同！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if (this.currentData.cmtContractState != '0') {
        this.$alert('合同生效禁止编辑！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.openDialog = true
      this.see = false
      this.edit = true
      this.name = '编辑合同管理'
      this.dialogForm = this.currentData
      this.feeValue = this.currentData.bidName
      this.cmtPartyAName = this.currentData.cmtPartyAName
      this.cmtPartyBName = this.currentData.cmtPartyBName

      this.computingBrandCache(this.currentData.consignmentDetailedVOs)
      if (this.currentData.consignmentDetailedVOs.length <= 4) {
        this.tableDataheight = '-'
        this.tableDataArray = this.currentData.consignmentDetailedVOs
        return
      }
      this.tableDataArray = this.currentData.consignmentDetailedVOs.slice(0, 4)
      this.$nextTick(() => {
        this.tableDataArray.push(this.currentData.consignmentDetailedVOs.slice(4, 5)[0])
        this.tableDataheightFn()
        if (this.currentData.consignmentDetailedVOs.length > 5) {
          this.tableDataArray = this.currentData.consignmentDetailedVOs
        }
      })
    },
    //新增车辆
    addCar() {
      this.openDialog = true
      this.see = false
      this.edit = false
      this.name = '新增合同管理'
      this.tableDataArray = []
      this.feeValue = ''
      this.tableDataheight = '-'
      this.dialogForm = {
        cmtContractTotalTransport: 0,
        cmtContractNo: '',
        cmtContractType: '',
        cmtContractName: '',
        cmtPartyA: '',
        cmtPartyAContacts: '',
        cmtPartyAPhone: '',
        cmtPartyB: '',
        cmtPartyBContacts: '',
        cmtPartyBPhone: '',
        cmtConsigneeInformation: '',
        cmtPlaceReceipt: '',
        cmtReceivingContact: '',
        cmtReceivingPhone: '',
        cmtLoadingPlace: '',
        cmtLoadingContact: '',
        cmtGoodsName: '',
        cmtPackingMethod: '',
        cmtSingleWeight: '',
        cmtShippingType: '',
        cmtTransportUnitPrice: '',
        cmtTotalFreight: '',
        cmtStartDateShipment: '',
        cmtLatestLoadingDate: '',
        cmtCorporateName: '',
        cmtOpeningBank: '',
        cmtAccount: ''
      }
    },
    closeDownload() {
      console.log(1111)
      this.downloadOpenDialog = false
      this.refreshList()
    },
    //关闭车辆对话框
    close() {
      this.openDialog = false
      this.currentData = {}
      this.refreshList()
    }
  },
  watch: {
    tableDataArray: function() {
      this.calculation
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .splitter-pane-resizer.horizontal {
  margin-top: -15px;
}
.danger {
  color: #f56c6c;
}
.app-container {
  overflow: hidden;
  background-color: #fff;
  position: relative;
  height: 100%;
}
.tree {
  padding-right: 20px;
  font-size: 1.4rem;
}
.right-detail {
  height: 100%;
  .top-type {
    width: 100%;
    height: 100%;
    table {
      max-width: 100%;
      font-size: 1.4rem;
    }
  }
  .bottom-code {
    width: 100%;
    height: 100%;
  }
}
.codeNumberCode {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 28px;
}
// 弹窗内的样式
.dialogBox {
  width: 100%;
  height: 100%;

  .box {
    padding: 12px 12px 1px 12px;
    position: relative;
    border: 1px solid rgb(29, 158, 233);
    border-radius: 5px;
    // height:300px;
    margin-bottom: 20px;
    .grid-content {
      height: 44px;
    }
    .name {
      position: absolute;
      top: -20px;
      font-size: 16px;
      font-weight: 700;
      padding: 10px;
      line-height: 20px;
      background: #fff;
    }
  }
  .dialogTopBox {
    width: 100%;
    padding-top: 20px;
    .botTitl {
      font-size: 18px;
      padding: 0px 0 5px 10px;
    }
  }
  .pointerinput {
    ::v-deep .el-input__inner {
      cursor: pointer;
      background-color: #fff;
      color: #606266;
    }
  }
  .dialogBotBox {
    margin-top: 10px;
    .botTitl {
      font-size: 18px;
      padding: 0px 0 5px 10px;
    }

    .botBtnBox {
      padding-left: 5px;
      padding-top: 1px;
      padding-bottom: 3px;
    }

    ::v-deep .solveDetailTable {
      padding-top: 5px;

      .el-input__inner {
        padding: 0;
      }

      .cell.el-tooltip {
        padding: 0;
      }
    }
  }
}

.pic {
  height: 500px;
  overflow: auto;
  img {
    width: 100%;
  }
}

div {
  ::v-deep .el-dialog__body {
    padding-bottom: 0px;
    padding-top: 1px;
  }
  .el-divider {
    background-color: white;
    position: relative;
  }
}
.driver {
  width: 100%;
  height: 100%;
  padding: 15px 15px 12px;
  display: flex;
  flex-direction: column;
  .form {
    height: 30px;
  }
  .btn {
    height: 50px;
    line-height: 50px;
  }
  .name {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
  }
  .table {
    flex: 1;
  }
  .pages {
    height: 30px;
  }

  .box {
    //上传对话框
    overflow: hidden;
    height: 200px;
    .selectItem {
      // float:right;
      display: inline-block;
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      padding: 20px;
    }
    .upload {
      // float:right;
      display: inline-block;
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      padding: 20px;
    }
  }
}
</style>
